<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap-栅格系统</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .row div {
            background: green;
            text-align: center;
            color: #fff;
            font-size: 30px;
            margin-bottom: 20px;

            /* margin:  0 10px;  不要设置间距，会打乱布局 */
        }

        .container {
            background: orange;
        }
    </style>
</head>

<body>
    <!-- 大屏幕 -->
    <!-- 容器 -->
    <div class="container">
        <!-- 行 -->
        <div class="row">
            <!-- 列，lg,md,sm,xs -->
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">1</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">2</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">3</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">4</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">5</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">6</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">7</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">8</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">9</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">10</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">11</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">12</div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">13</div>
        </div>
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-5">555</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-lg-offset-1 col-sm-offset-1  col-md-offset-1">333</div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-lg-offset-3 col-sm-offset-3  col-md-offset-3">222</div>
        </div>
        <div class="row">
            <div class="col-lg-5 col-md-5">555</div>
            <div class="col-lg-3 col-md-5">333</div>
            <div class="col-lg-2 col-md-2">222</div>
        </div>

</body>

</html>